<!DOCTYPE html>
<body>
<style>
input {
    color: lime;
    text-indent: 1px;
    zoom: 8;
}

input::-webkit-input-placeholder {
    text-indent: -1px;
    font-weight: bold;
    color: red;
}
</style>
<p>The green caret in the following text box should painted over the red placeholder text.</p>
<input>
<script>
var input = document.querySelector('input');
input.focus();
input.placeholder = 'Placeholder';
</script>
</body>
